<template>
  <view class="underwriter-root" :style="fullStyle">
    <view class="problem-search-root">
      <u-input @input="resetQuery" placeholder="保单名称/保单号" suffixIcon="arrow-down" border="none"
               disabledColor="#ffffff" v-model="queryParam.keyword">
      </u-input>
    </view>
    <view class="item-root">
      <u-list
          @scrolltolower="loadMore"
      >
        <u-list-item
            v-for="(item, index) in tableData"
            :key="index">
          <view class="content-container">
            <view class="title-root">
              <view class="title-containet">
                <view class="icon">保单号</view>
                <u-tag :text="item.orderGisState=='1'?'已上传':'未上传'" plain size="mini" :type="item.orderGisState=='1'?'success':'warning'">{{ item.orderGisState=='1'?'已上传':'未上传' }}</u-tag>
                <view class="title">
                  {{ item.bxdhm }}
                </view>
              </view>
              <view class="bt-container">
                <u-button @click="showGeometry(item)" color="#569A5D"
                          text="空间数据" class="diy-cutton"></u-button>
              </view>
            </view>
            <view class="info-container">
              <view class="row row1">
                <view class="info-item lx">
                  <view class="label">
                    所属地域：
                  </view>
                  <view class="value">
                    {{ item.areaName }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item gnq">
                  <view class="label">
                    投保单号：
                  </view>
                  <view class="value">
                    {{ item.tbdh }}
                  </view>
                </view>
              </view>

              <view class="row row2">
                <view class="info-item lx">
                  <view class="label">
                    险种代码：
                  </view>
                  <view class="value">
                    {{ item.xzdm }}
                  </view>
                </view>
              </view>

              <view class="row row2">
                <view class="info-item gnq">
                  <view class="label">
                    险种名称：
                  </view>
                  <view class="value">
                    {{ item.xzmc }}
                  </view>
                </view>
              </view>

              <view class="row row3" v-show="item.showFlag">
                <view class="info-item lx">
                  <view class="label">
                    总保费（元）：
                  </view>
                  <view class="value">
                    {{ item.zbf }}
                  </view>
                </view>
              </view>

              <view class="row row3" v-show="item.showFlag">
                <view class="info-item gnq">
                  <view class="label">
                    自交保费：
                  </view>
                  <view class="value">
                    {{ item.zjbf }}
                  </view>
                </view>
              </view>


              <view class="row row6" v-show="item.showFlag">
                <view class="info-item lx">
                  <view class="label">
                    投保人/被保险人：
                  </view>
                  <view class="value">
                    {{ item.tbr }}
                  </view>
                </view>
              </view>

              <view class="row row6" v-show="item.showFlag">
                <view class="info-item lx">
                  <view class="label">
                    投保面积(㎡)：
                  </view>
                  <view class="value">
                    {{ item.tbmj }}
                  </view>
                </view>
              </view>

              <view class="row row5" v-show="item.showFlag">
                <view class="info-item lx">
                  <view class="label">
                    备注：
                  </view>
                  <view class="value">
                    {{ item.remark }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="con-container" @click="showCurrent(item)">
            <view class="txt">{{ item.showFlag ? '收起' : '展开' }}</view>
            <view class="icon">
              <u-icon v-if="item.showFlag" name="arrow-up"></u-icon>
              <u-icon v-if="!item.showFlag" name="arrow-down"></u-icon>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script>
import {baseMixins} from "@/mixins/baseMixins";
import {GET_MESSAGE} from "@/api";
import {requestGet} from "@/util/request";
import {mapPath} from "@/util/publicConfig";

export default {
  mixins: [baseMixins],
  data() {
    return {
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        keyword: ''
      },
      total: 0,
      loading: false,
      tableData: []
    }
  },
  methods: {
    showCurrent({id}) {
      this.tableData = this.tableData.map(item => {
        if (item.id === id) {
          item.showFlag = !item.showFlag
        }
        return item
      })
    },
    showGeometry(chitInfo) {
      this.goSubPage(`${mapPath}?chitId=${chitInfo.id}`)
    },
    resetQuery() {
      this.queryParam.pageNum = 1;
      this.tableData = []
      this.getList()
    },
    loadMore() {
      if (this.total <= this.queryParam.pageNum * this.queryParam.pageSize) {
        uni.$u.toast('暂无更多数据');
        return
      }
      this.queryParam.pageNum += 1
      this.getList()
    },
    getList() {
      this.loading = true
      requestGet({
        url: GET_MESSAGE,
        data: this.queryParam
      }).then(res => {
        uni.$u.toast('加载成功');
        this.tableData = this.tableData.concat(res.rows.map(item => {
          item.showFlag = false
          return item
        }))
        this.total = res.total
      }).finally(e => {
        this.loading = false
      })
    }
  },
  onLoad() {
    this.getList()
  }
}
</script>

<style lang="scss">
$font-size: 25rpx;
.underwriter-root {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10rpx 20rpx 0rpx 10rpx;

  .problem-search-root {
    height: 80rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .u-input {
      height: 100%;
      background: #fff;
      padding: 0rpx 20rpx !important;

      .u-input__content {
        padding-right: 30rpx;
      }

      .uni-input-input,
      .uni-input-placeholder {
        padding: 0 10rpx 0 20rpx;
        box-sizing: border-box;
      }
    }
  }

  .item-root {
    width: 100%;
    height: calc(100% - 100rpx);
    margin-top: 20rpx;
    border-radius: 20rpx;

    .u-list{
      height: 100% !important;
    }

    .u-list-item{
      margin-bottom: 40rpx;
      border-radius: 20rpx;
      background: #fff;

      &:last-child{
        margin-bottom:0
      }
    }

    .content-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #EFEFEF;
      border-radius: 20rpx;

      .title-root {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        // background: pink;
        align-items: center;

        .title-containet {
          display: flex;
          width: max-content;
          justify-content: flex-start;
          font-size: $font-size;
          font-weight: 500;
          align-items: center;

          .icon {
            border: 4rpx solid #000;
            border-radius: 10rpx;
            height: max-content;
            padding: 0 10rpx;
            margin-right: 10rpx;
            box-sizing: border-box;
            font-size: $font-size;
            position: relative;
            top: 4rpx;
          }
        }
      }

      .info-container {
        display: flex;
        flex-direction: column;

        .row {
          display: flex;
          width: 100%;
          margin-bottom: 15rpx;
          height: max-content;

          .info-item {
            display: flex;
            text-align: center;
            height: max-content;

            .label {
              text-align: center;
              width: max-content;
              margin-right: 5rpx;
              font-size: $font-size;
              color: #000;
              font-weight: 500;
            }

            .value {
              color: #333;
              text-align: center;
              height: 100%;
              font-size: $font-size;
            }
          }
        }
      }
    }

    .con-container {
      display: flex;
      justify-content: center;
      padding: 10rpx;
      height: max-content;
      align-items: center;

      .txt {
        font-size: $font-size;
      }
    }
  }

}
</style>
